讓畫面更精美跟客製化，今天來加入 Tailwind CSS

• 首先用 npm 來安裝 Tailwind CSS & postcss

  npm install tailwindcss postcss autoprefixer
  

• 初始化 Tailwind CSS 的配置，輸入以下指令會自動創建 tailwind.config.js 和 postcss.config.js

  npx tailwindcss init -p
  

• 配置 Tailwind CSS，在 tailwind.config.js 輸入以下配置

    export default {
        mode: "jit",
        content: ["./src/**/*.{vue,js}"],
        theme: {
            extend: {},
        },
        plugins: [],
    };
  

• 配置 PostcCSS ，在 postcss.config.js 輸入以下配置

    export default {
        plugins: {
            tailwindcss: {},
            autoprefixer: {},
        },
    }
  

• src/theme 中新增 tailwind.css ，導入 Tailwind CSS 樣式

    @import "tailwindcss/base";
    @import "tailwindcss/components";
    @import "tailwindcss/utilities";
  

• 在 mian.js import tailwind.css

  import './theme/tailwind.css'
  

這樣配置就沒問題了！